<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='#FFFFFF00' :isBack="true" backIconColor='#FFF' isFix isShow custom nextUrl='/pages/index/index?PageCur=2&isMap=3'>
			<text slot='center-slot' class="center-slot">新增地图</text>
		</top-navigation>
		<u-toast ref="uToast"></u-toast>
		<view class="menu-box justify-between">
			<view class="justify-start align-center">
				<image class="my-long" src="/static/images/starmap/my-long.png" mode="heightFix"></image>
				<view class="">
					<view class="long-kuang-num DINPro-Bold">
						{{map_num}}
					</view>
					<view class="my-long-kuang">
						我的地图
					</view>
				</view>
			</view>
			<view class="justify-start align-center">
				<image class="shuijingb" src="/static/images/starmap/shuijingb.png" mode=""></image>
				<view class="">
					<view class="long-kuang-num">
						{{crystal}}
					</view>
					<view class="my-long-kuang">
						我的钻石
					</view>
				</view>
			</view>
		</view>
		<!-- 高级地图 -->
		<view class="top-box">
			<image class="hot-title" src="/static/images/starmap/high-map.png" mode=""></image>
		</view>
		<view class="feature justify-between">
			<view class="feature-box" v-for="item,index in list" :key="index">
				<image class="open-map-icon" src="/static/images/starmap/open_map_icon.png" mode=""></image>
				<view class="justify-start align-center">
					<view class="map-type">
						{{item.name}}
					</view>
					<view class="long-box DINPro-Bold justify-start align-center">
						<!-- <image class="xiao-long" src="/static/images/starmap/my-long.png" mode=""></image> -->
						x{{item.max}}
					</view>
				</view>
				<view class="map-production justify-start align-center">
					<view class="item">
						<view class="production-time">
							{{item.desc}}
						</view>
						<view class="justify-start align-end">
							<image class="kuangshi-icon" src="/static/images/starmap/shuijingb.png" mode=""></image>
							<view class="pro-num DINPro-Bold">
								{{item.obtain}}
							</view>

						</view>
					</view>
					<view class="item1">
						<view class="production-time">
							消耗钻石
						</view>
						<view class="justify-start align-end">
							<image class="kuangshi-icon" src="/static/images/starmap/shuijingb.png" mode=""></image>
							<view class="pro-num DINPro-Bold">
								{{item.consume}}
							</view>
						</view>
					</view>
					<view class="open-map justify-center align-center" :style="{
						background:(global==0) || (item.max==0)?'#ccc':'',
						color:(global==0) || (item.max==0)?'#000':''
					}" @click="featureTap(item,index)">
						开启地图
					</view>
				</view>
			</view>
		</view>
		<!-- 联系客服弹出层-->
		<u-popup :show="moneyShow" mode="center" @close="moneyShow=false" round="16rpx" bgColor='transparent'
			overlayOpacity='0.85'>
			<view class="popup-one-box flex-col align-center">
				<image class="popup-top-bg" src="/static/images/starmap/popup_top-bg.png" mode=""></image>
				<view class="popup-top-gaoji">
					<image class="gao-ji" src="/static/images/starmap/high-map.png" mode=""></image>
				</view>
				<view class="has-shuijing justify-start DINPro-Bold">
					拥有钻石: <text class="shui-ji-num ">{{crystal}}</text> 个
				</view>
				<view class="need-kuang justify-between align-center">
					<view class="need-shuijing">
						需消耗的钻石
					</view>
					<view class="need-shuijing-num justify-start align-center">
						<image class="popup-kuangshi" src="/static/images/starmap/shuijingb.png" mode=""></image>
						{{popdata.consume}}
					</view>
				</view>
				<view class="popup-box-btn align-center justify-center"
				@tap="openMap"
				:style="{
					background:isDisable?'#8e929b':'#27ff92',
					color:isDisable?'#000':'#000'
				}"
				>
					{{'开启地图'}}
				</view>
				<view class="popup-box-cancel align-center justify-center" @click="moneyShow=false">
					<image class="close-popup" src="/static/images/starmap/close.svg" mode=""></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				current: 0,
				global: 0,
				crystal: 0,
				list: [],
				map_num: 0,
				moneyShow: false,
				popdata:{},
				hotList: [{
						url: '/static/images/home/h1.png',
						title: '16.00'
					},
					{
						url: '/static/images/home/h2.png',
						title: '16.00'
					},
					{
						url: '/static/images/home/h3.webp',
						title: '16.00'
					},
					{
						url: '/static/images/home/h4.webp',
						title: '16.00'
					},
					{
						url: '/static/images/home/h5.jpg',
						title: '16.00'
					},
					{
						url: '/static/images/home/h6.jpg',
						title: '16.00'
					},
				],

				featureGroup: [{
						url: '/static/images/home/banner1.jpg',
						title: '地图'
					},
					{
						url: '/static/images/home/banner2.jpg',
						title: '龙蛋'
					},
					{
						url: '/static/images/home/banner3.jpg',
						title: '推广营销'
					},
					{
						url: '/static/images/home/banner4.jpg',
						title: '会员管理'
					},

				]


			}
		},
		onLoad() {
			this.getIndex()
		},
		computed:{
			isDisable(){
				return this.crystal< Number(this.popdata.consume) 
			}
		},
		methods: {
			async openMap(){
				let _this = this
				let url = '/api/v1/open_map3'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					type: this.popdata.type,
				})
				if (code == 200) {
					this.$refs.uToast.show({
						message: msg,
						// complete(){
						// }
					})
					_this.moneyShow = false
					this.getIndex()
					}
			},
			// 地图列表
			async getIndex(e) {
				let url = '/api/v1/map3_list'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url, {
					page: this.page,
				})
				if (code == 200) {
					console.log(data, '静态资源');
					this.map_num = data.map_num
					this.global = data.global
					this.crystal = parseFloat(data.crystal).toFixed(6)
					this.list = data.map_list || []
					// if (e) {
					// 	// this.status = 'loadmore'
					// 	this.eggInfoList = [...this.eggInfoList, ...data.list]
					// } else {
					// 	this.eggInfoList = data.list
					// }
					// this.page = data.page //"1",/
					// this.pagesize = data.pagesize //"20",
					// this.totalpage = data.totalpage //"1"

				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
				// this.loading = false
			},
			featureTap(e) {
				if (this.global == 0) return
				this.moneyShow = true
				this.popdata = e
			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		background: url('/static/images/starmap/top-bg.jpg') #16161e no-repeat top center / 100% 1094rpx;

		.center-slot {
			color: #FFF;
		}

		.menu-box {
			margin-top: 45rpx;
			width: calc(100vw - 64rpx);
			padding: 26rpx 34rpx;
			position: relative;
			color: #fff;
			background: linear-gradient(180deg, #1c3f50 0%, #1d2335 100%);
			border-radius: .5rem;
			z-index: 2;
			color: #fff;

			&::before {
				content: "";
				height: 1.125rem;
				width: .0625rem;
				position: absolute;
				top: 1.625rem;
				left: 10.625rem;
				background-color: rgba(255, 255, 255, .1);
			}

			.my-long {
				margin-right: 18rpx;
				width: 88rpx;
				height: 88rpx;
			}

			.shuijingb {
				margin-right: 18rpx;
				width: 88rpx;
				height: 68rpx;
			}

			.long-kuang-num {
				font-weight: 700;
				font-size: .875rem;
			}

			.my-long-kuang {
				margin-top: 10rpx;
				font-size: .625rem;
			}

		}


	}

	.top-box {
		margin-top: 65rpx;
		width: 690rpx;

		.hot-title {
			width: 156rpx;
			height: 35rpx;
		}
	}

	.feature {
		margin-top: 48rpx;
		flex-wrap: wrap;
		padding: 0 30rpx;
		box-sizing: border-box;



		.feature-box {
			margin-bottom: 32rpx;
			width: 100%;
			background: #20202c;
			color: #fff;
			box-shadow: 0rpx 6rpx 35rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 16rpx;
			padding:45rpx 28rpx 36rpx ;
			position: relative;
			overflow: hidden;
			background: url('/static/images/starmap/map_list_bg.png') no-repeat center center / 100% 100%;

			.open-map-icon {
				width: 172rpx;
				height: 118rpx;
				position: absolute;
				top: 25rpx;
				right: 24rpx;
			}

			.map-type {
				margin-right: 16rpx;
				vertical-align: middle;
				color: #fff;
				font-size: 32rpx;
				font-weight: 900;
			}

			.long-box {
				border-radius: 8rpx;
				padding: 8rpx 10rpx;
				background-color: #14313f;
				// font-size: 20rpx;
				font-size: 26rpx;
				color: #FFFFFFCC;
			}

			.xiao-long {
				width: 30rpx;
				height: 30rpx;
			}

			.map-production {
				margin-top: 40rpx;
				padding: 18rpx 28rpx;
				background-color: #14313f;
				border-radius: 8rpx;


				.open-map {
					margin-left: 40rpx;
					width: 186rpx;
					height: 68rpx;
					color: #be6300;
					background: url('/static/images/starmap/btn-open-map.png') no-repeat top center/100% 100%;
					font-size: 26rpx;
					font-weight: 700;
					text-align: center;
					border-radius: 12rpx;
					position: relative;
					z-index: 2;
				}

				.production-time {
					margin-bottom: 40rpx;
					font-size: 20rpx;
					color: #FFFFFF99;
				}

				.pro-num {
					font-size: 32rpx;
					color: #fff;
					font-weight: 700;
				}

				.item {
					width: 175rpx;
				}

				.item1 {
					width: 160rpx;
					margin-left: 24rpx;
				}

				.kuangshi-icon {
					margin-right: 5rpx;
					width: 56rpx;
					height: 36rpx;
				}
			}




		}

	}

	.popup-one-box {
		position: relative;
		z-index: 7;
		width: 560rpx;
		border-radius: 16rpx;
		background: linear-gradient(181deg, rgba(35, 52, 73, .94) 20%, #181922 100%);
		padding: 90rpx 40rpx 40rpx;

		.has-shuijing {
			width: 100%;
			height: 44rpx;
			font-size: 28rpx;
			color: #FFFFFF99;
			margin-bottom: 24rpx;
		}

		.shui-ji-num {
			font-size: 28rpx;
			color: #FFF;
			font-weight: 700;
		}

		.popup-box-btn {
			width: 480rpx;
			height: 90rpx;
			background: #8e929b;
			color: #202426;
			font-size: 30rpx;
			border-radius: 8rpx;
			font-weight: 700;
		}

		.popup-box-cancel {
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			bottom: -120rpx;
		}

		.close-popup {
			width: 48rpx;
			height: 48rpx;
		}

		.popup-kuangshi {
			width: 56rpx;
			height: 36rpx;
		}

		.need-kuang {
			width: 480rpx;
			height: 120rpx;
			background: rgba(46, 70, 86, .41);
			border-radius: 8rpx;
			padding: 0 20rpx;
			margin-bottom: 40rpx;

			.need-shuijing {
				font-size: 22rpx;
				color: #FFFFFF99;
			}

			.need-shuijing-num {
				font-size: 28rpx;
				font-weight: 700;
				color: #FFF;
			}
		}

		.popup-top-bg {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			right: 0;
			z-index: -1;
			height: 108rpx;
		}

		.popup-top-gaoji {
			position: absolute;
			top: 40rpx;
			right: 30rpx;

			.gao-ji {
				width: 156rpx;
				height: 35rpx;
			}
		}

	}
</style>